<template>
	<view class="">
		<view class="my-list">
			<u-list @scrolltolower="scrolltolower" v-if="dataList.length > 0">
				<u-list-item v-for="(item, index) in dataList" :key="index" >
					<view 
						class="gift-bag-item" 
						@click="$u.route('/pages/shop/GiftPack/detail', {id:item.id, type: '2'})"
						:style="{background: item.bgColor}"
					>
						<view class="flex flex--row">
							<text>{{item.name}}</text>
							<text class="fsize-24 mt-10">含{{item.projectCount}}种明细 · 剩余{{item.balance}}次派发</text>
						</view>
						<view class="flex justify-between">
							<text class="fsize-24"></text>
							<view class="flex justify-end">
								<view v-if="userInfo.roleCategoryId!==2" class="obtn" @click.stop="onDelRow(item, index)">删除</view>
								<view v-if="userInfo.roleCategoryId===2" class="obtn" @click.stop="onShareCode(item.cardItemId, item.shareCode, 14)">分享码</view>
								<view v-if="userInfo.roleCategoryId===2" class="obtn" @click.stop="onShare(item.cardItemId, item.shareCode, 14)">分享</view>
								<view v-if="userInfo.roleCategoryId!==2" class="obtn" @click.stop="onClickCard(item)">修改剩余</view>
							</view>
						</view>
					</view>
				</u-list-item>
				<!-- <u-loadmore :status="loadmore.status" :icon-type="loadmore.iconType" :load-text="loadmore.loadText.loadText" margin-top="20"
					margin-bottom="20" class="coreshop-padding-top-10" /> -->
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="dataList.length === 0">
			<u-empty icon-size="150" text="暂无数据" mode="data"></u-empty>
		</view>
		<!-- 弹出修改礼包剩余次数 -->
		<u-popup 
			:show="showpop" 
			@close="showpop = false"
			:safeAreaInsetBottom="false"
			mode="center"
			round="10"
		>
			<view class="pl-30 pr-30 pt-50 pb-50 flex flex--row align-center">
				<view class="width-500 ">
					<u-input v-model="reviseData.balance" placeholder="(*正负数)请输入本次增减的数量" border="bottom" inputAlign="center"/>
				</view>
				<view class="mt-20 width-500">
					<u-input v-model="reviseData.remarks" type="number" placeholder="请输入备注信息" border="bottom" inputAlign="center"/>
				</view>
				<view class="mt-40 width-160">
					<u-button text="确定" color="#e54d42" @click.stop="onSubmit"></u-button>
				</view>
			</view>
		</u-popup>
		<uni-fab
			v-if="userInfo.roleCategoryId === 3 || userInfo.roleCategoryId === 5"
			:popMenu="false" 
			ref="fab" 
			horizontal="right" 
			:pattern="{ buttonColor :'#e54d42' }"
			@fabClick="$u.route('/pages/shop/GiftPack/list?distributionMethod=2&&staffId='+searchData.staffId )"
		/>
	</view>
</template>

<script>
	// import listHeightMixin from '@/common/computedAltitude.js'
	import { mapState} from 'vuex'
	import share from '@/common/mixins/share.js'
	export default {
		mixins:[share],
		data() {
			return {
				showpop: false,
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
				curNow: 0,
				reviseData:{
					staffId: '',
					balance: 0,
					remarks:'',
					id: '',
				},
				dataList: [],
				searchData: {
					share: 1,
					staffId: '',
					page: 1,
					limit: 99
				}
			}
		},
		onLoad(opt) {
			this.searchData.staffId = opt.id
			this.reviseData.staffId = opt.id
			uni.setNavigationBarTitle({
				title: `${opt.userName}的拓客礼包`
			})
			this.getPageList()
			uni.$on('upFtBagList', ()=>{
				this.searchData.page = 1
				this.dataList = []
				this.getPageList()
			})
		},
		onUnload() {
			uni.$off('upFtBagList')
		},
		computed: { ...mapState(['userInfo'])},
		methods: {
			openPopup(){
				this.showpop = true
				this.reviseData = this.$options.data().reviseData
			},
			onSubmit(){
				if(uni.$u.test.isEmpty(this.reviseData.balance)){
					uni.showToast({ title: '请输入本次增减的数量', icon:'none'})
				}else if(uni.$u.test.isEmpty(this.reviseData.remarks)){
					uni.showToast({ title: '请输入备注信息', icon:'none'})
				} else {
					this.$reqJsonPost('StockHolderGiftBagEdit',this.reviseData).then(res=>{
					this.searchData.page = 1
					this.dataList = []
					this.getPageList()
					this.showpop = false
					})
				}
			},
			onClickCard(card){
				this.showpop = true
				this.reviseData.balance = 0
				this.reviseData.remarks = ''
				this.reviseData.id = card.id
			},
			onDelRow(im, ix){
				const that = this
				uni.showModal({
					title: '提示',
					content:'确定删除该礼包,此操作将同时删除二次分享的礼包?',
					success: (res)=>{
						if(res.confirm){
							that.$reqJsonPost('StockHolderGiftBagDoDelete', {id: im.id}).then(res=>{
								that.dataList.splice(ix, 1)
							})
						}
					}
				})
			},
			getPageList() {
				this.$reqPost('StockHolderGiftBagGetPageList', this.searchData).then(res => {
					this.dataList = [...this.dataList, ...res.data]
					if (res.count > this.dataList.length) {
						this.loadmore.status = 'loadmore'
						this.searchData.page++
					} else {
						// 数据已加载完毕
						this.loadmore.status = 'nomore'
					}
				})
			},
			scrolltolower() {
				if (this.loadmore.status === 'loadmore') {
					this.getPageList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
